import { colors, typography } from "app/theme"
import React, { useEffect, useState } from "react"
import { ActivityIndicator, Dimensions, Image, StyleSheet, View, Text } from "react-native"
import { PanGestureHandler } from "react-native-gesture-handler"
import Animated, {
  Extrapolate,
  Extrapolation,
  interpolate,
  runOnJS,
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from "react-native-reanimated"
import { AntDesign } from "@expo/vector-icons"

const BUTTON_WIDTH = Dimensions.get("screen").width - 48 - 80

const SWIPE_RANGE = BUTTON_WIDTH - 120 - 74

type SwipeButtonPropsType = {
  onSwipe?: () => void
  isLoading?: boolean
}

const SwipeableButton = ({ onSwipe }: SwipeButtonPropsType) => {
  const X = useSharedValue(0)

  const [enabled, setEnabled] = useState(true)

  const animatedGestureHandler = useAnimatedGestureHandler({
    onActive: (e) => {
      const newValue = e.translationX

      if (newValue >= 0 && newValue <= SWIPE_RANGE) {
        X.value = newValue
      }
    },
    onEnd: () => {
      if (X.value < SWIPE_RANGE - 10) {
        X.value = withSpring(0)
      } else {
        runOnJS(onSwipe)()
      }
    },
  })

  const AnimatedStyles = {
    swipeButton: useAnimatedStyle(() => {
      return {
        transform: [
          {
            translateX: interpolate(
              X.value,
              [0, BUTTON_WIDTH],
              [0, BUTTON_WIDTH],
              Extrapolation.CLAMP,
            ),
          },
        ],
      }
    }),
    swipeText: useAnimatedStyle(() => {
      return {
        opacity: interpolate(X.value, [0, BUTTON_WIDTH / 4], [1, 0], Extrapolate.CLAMP),
        transform: [
          {
            translateX: interpolate(
              X.value,
              [20, SWIPE_RANGE],
              [0, BUTTON_WIDTH / 3],
              Extrapolate.CLAMP,
            ),
          },
        ],
      }
    }),
  }

  return (
    <View style={styles.swipeButtonContainer}>
      <PanGestureHandler enabled={enabled} onGestureEvent={animatedGestureHandler}>
        <Animated.View style={[styles.swipeButton, AnimatedStyles.swipeButton]}>
          <View style={styles.row}>
            <View style={!enabled ? { alignItems: "center" } : {}}>
              <Text style={styles.largeText}>Provider Entrance</Text>
              <View style={styles.secondRow}>
                <Text style={styles.smallText}>{!enabled ? "Opened" : "Slide to unlock"}</Text>
                {enabled ? (
                  <AntDesign name="doubleright" size={14} color="black" style={{ marginLeft: 5 }} />
                ) : null}
              </View>
            </View>
            {enabled ? (
              <View style={{ marginLeft: 10 }}>
                <AntDesign name="doubleright" size={20} color="black" />
              </View>
            ) : null}
          </View>
        </Animated.View>
      </PanGestureHandler>
      <Animated.Text style={[styles.swipeText, AnimatedStyles.swipeText]}></Animated.Text>
    </View>
  )
}

const styles = StyleSheet.create({
  swipeButtonContainer: {
    height: 84,
    backgroundColor: "lightgrey",
    borderRadius: 10,
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
    width: BUTTON_WIDTH,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 2,
  },
  swipeButton: {
    position: "absolute",
    left: 0,
    height: 84,
    width: 200,
    borderRadius: 10,
    zIndex: 3,
    backgroundColor: colors.grey,
    alignItems: "center",
    justifyContent: "center",
  },
  swipeButtonDisabled: {
    backgroundColor: "#E4E9EE",
  },
  swipeText: {
    alignSelf: "center",
    fontSize: 14,
    fontWeight: "400",
    zIndex: 2,
    color: "grey",
    marginLeft: 80,
  },
  chevron: {
    height: 25,
    width: 20,
    tintColor: "white",
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  largeText: {
    fontSize: 14,
    fontFamily: typography.fonts.spaceGrotesk.bold,
    color: colors.black,
  },
  secondRow: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 4,
  },
  smallText: {
    fontSize: 12,
    fontFamily: typography.fonts.spaceGrotesk.light,
    textAlign: "center",
    color: colors.black,
  },
})

export default SwipeableButton
